

import { Form, Input, Button, Select, message } from "antd"
import { UserOutlined, LockOutlined, PhoneOutlined, } from '@ant-design/icons';
import { useRef, useEffect, useState } from "react"
import { reg } from "../../utils/validate"
import { observer } from "mobx-react";
import { mbdata } from "../../mobx/data";
import { roleList } from "../../utils";
import { $http } from "../../api";
const { Option } = Select;
const { pwd, account, phone } = reg;

function MyInfo() {
  const onFinish = (value) => {
    $http.updateuserinfo({
      ...value,
      _id: mbdata.userInfo._id,
    })
      .then(res => {
        if (res.code == 200) {

        }
      })
  }
  const onFailed = () => {
    message.error("请输入有效的信息")
  }
  const [banji, setBanji] = useState([])
  const form = useRef()
  // const {xuekeList,banjiList} = mbdata;
  useEffect(() => {
    const { userInfo } = mbdata;

    $http.getxueke()
      .then(res => {
        if (res.code == 200) {
          mbdata.changexuekeList(res.result)
        }
      })

    $http.getbanjis({})
      .then(res => {
        if (res.code == 200) {
          mbdata.changebanjiList(res.result)
          setBanji(res.result);
        }
      })

    $http.getuserinfo()
      .then(res => {
        if (res.code == 200) {
          mbdata.changeUserInfo(res.result)
          form.current.setFieldsValue(res.result);
        }
      })

  }, [])
  const changexueke = value => {
    console.log(value)

    var list = mbdata.banjiList.filter(item => item.xueke == value)
    // mbdata.changebanjiList(list);
    setBanji([...list])
  }
  return (
    <div>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{    // 设置表单的初始值
        }}
        onFinish={onFinish}
        onFinishFailed={onFailed}
        ref={form}
        layout="vertical"
      >
        <Form.Item
          name="phone"
          label="手机号"
          rules={[
            {
              required: true,
              message: '请输入手机号',
            },
            {
              pattern: phone,
              message: "请输入正确的手机号码"
            }
          ]}
        >
          <Input disabled prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          name="account"
          label="用户名"
          rules={[
            {
              required: true,
              message: '请输入用户名',
            },
          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          name="role"
          label="用户权限"
        >
          <Select disabled placeholder="请选择" style={{ width: '100%' }} >

            {
              roleList.map((l, i) => (
                <Option key={i} value={l.value} >
                  {l.text}
                </Option>
              ))
            }
          </Select>
        </Form.Item>
        <Form.Item
          name="xueke"
          label="学科"
        >
          <Select placeholder="请选择" style={{ width: '100%' }} onChange={changexueke} >
            {
              mbdata.xuekeList.map((l, i) => (
                <Option key={i} value={l.value} >
                  {l.text}
                </Option>
              ))
            }
          </Select>
        </Form.Item>
        <Form.Item
          name="banji"
          label="班级"
        >
          <Select placeholder="请选择" style={{ width: '100%' }} >
            {
              banji.map((l, i) => (
                <Option key={i} value={l.value} >
                  {l.text}
                </Option>
              ))
            }
          </Select>
        </Form.Item>
        <Form.Item
        >
          <Button block type="danger" htmlType="submit" >修改</Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default observer(MyInfo)